<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
    }
    .content{
        width: 200px;/*确保与每个页面大小一致*/
        height: 500px;
        position: relative;
        overflow: hidden;
        background-color: #1E9FFF;
    }
    .wrapper{
        width: 600px;/*确保是n个页面宽度的n倍*/
        height: 500px;/*确保与页面高度相同*/
        background-color: red;
        display: flex;
        position: absolute;
    }
    .wrapper div{
        width: 200px;/*页面宽度*/
        height: 500px;/*页面高度*/
        flex-shrink: 0;/*禁止压缩宽度*/
        border: #004b00 1px solid;
        font-size: 50px;
        text-align:left;
    }
    .wrapper div:nth-child(2n)
    {
        background-color: #c592ff;
    }
</style>
<body>
<div class="content">
    <div class="wrapper">
    </div>
</div>
</body>
<!--判断是否还有上/下一页，获取当前显示的是哪一页(上/当前/一页)-->
<script>
    let allPageNumber=3//书籍总计100页，wrapper下有100个div
    let currentPageNumber=1//书籍当前页码
    function getAllPageNumber() {
        return allPageNumber
    }
    function haveNextPage() {
        if(currentPageNumber<allPageNumber)
        {
            return true
        }
        else
            return false
    }
    function haveUpPage() {
        if(currentPageNumber>1)
        {
            return true
        }
        else
            return false
    }
    function setCurrentPageNumber(number) {
        currentPageNumber=number
    }
    function getCurrentPageNumber() {
        return currentPageNumber
    }

    function initPage(pageNumber) {

        let c=document.querySelector(".wrapper .p"+pageNumber)
        c.innerHTML=getBookByPageNumber(pageNumber)
        if(haveNextPage())
        {
            let c=document.querySelector(".wrapper .p"+(pageNumber+1))
            c.innerHTML=getBookByPageNumber(pageNumber+1)
        }
        if(haveUpPage())
        {
            let c=document.querySelector(".wrapper .p"+(pageNumber-1))
            c.innerHTML=getBookByPageNumber(pageNumber-1)
        }
    }
    function getBookByPageNumber(number) {
       return "第"+number+"页"
    }
</script>
<script>
    //初始化书籍滑动容器
    initBookBox(900)//书籍页面宽度
    function initBookBox(pageWidth) {
        let allPageNumber=getAllPageNumber()
        let wrapper=document.querySelector(".wrapper")//书籍页面容器
        /*拼接书籍页面*/
        let html=``
        for(let i=0;i<allPageNumber;i++)
        {
            html=html+`<div class="${'p'+(i+1)}">${i+1}</div>`
        }
        wrapper.innerHTML=html

        let box = document.querySelector(".content") //滑动监听监听对象
        //获取书籍初始页面个数
        let ch=document.querySelectorAll(".wrapper div")//书籍页面
        for(let i=0;i<ch.length;i++)
            ch[i].style.width=pageWidth+"px"
        wrapper.style.width=pageWidth*ch.length+"px"
        box.style.width=pageWidth+"px"
        /*初始化第一页*/
        initPage(1)
    }
</script>
<!--滑动事件以及回调函数-->
<script>
    let startDistanceX = '' // 触摸开始X轴位置
    let startDistanceY = '' // 触摸开始Y轴位置
    let endDistanceX = '' // 触摸结束X轴位置
    let endDistanceY = '' // 触摸结束Y轴位置
    let moveDistanceX = '' // 触摸移动X轴距离
    let moveDistanceY = '' // 触摸移动Y轴距离


    let box = document.querySelector(".content") // 监听对象
    let wrapper=document.querySelector(".wrapper")
    //获取书籍初始页面个数
    let ch=document.querySelectorAll(".wrapper div")
    //获取书籍页面宽度
    let width=ch[0].offsetWidth

    //初始化容器位置
    let BASE_WOSL=wrapper.offsetLeft

    box.addEventListener("touchstart",touchstart)
    //按住ctrl,鼠标点击addEventListener()查看源码，里面的interface GlobalEventHandlersEventMap有包含多少事件
    box.addEventListener("touchmove",touchmove)

    box.addEventListener("touchend",touchend)
    /*定义回调函数*/
    function touchstart(e) {
        startDistanceX = e.touches[0].screenX
        startDistanceY = e.touches[0].screenY
    }
    function touchmove(e) {
        let x=e.changedTouches[0].screenX
        let b=x-startDistanceX//相对位移
        //在存在上/下一页的清空下不断位移不断位移
        if((b<0&&haveNextPage())) {
            wrapper.style.left = BASE_WOSL + b + "px"
        }
        else if((b>0&&haveUpPage()))
        {
            //console.log("当前"+getCurrentPageNumber())
            wrapper.style.left= BASE_WOSL+b+"px"
        }
        // console.log(b)
    }
    function touchend(e) {
        let box = document.querySelector(".content")

        endDistanceX = e.changedTouches[0].screenX
        endDistanceY = e.changedTouches[0].screenY

        moveDistanceX = startDistanceX - endDistanceX
        moveDistanceY = startDistanceY - endDistanceY
        // console.log(moveDistanceX, moveDistanceY)
        // 判断滑动距离超过

        /*一定要在设置style.left时确保前后值>=0.5,不然可能设置了但是没效果*/
        if ((Math.abs(moveDistanceX) > width/5) ) {
            // 判断X轴移动的距离是否大于Y轴移动的距离
          //  if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
                // 左右
                //console.log(moveDistanceX > 0 ? '左' : '右')
                if(moveDistanceX>0&&haveNextPage())//下一页
                {
                    /*移除事件监听器，防止在滑动过程中又滑动*/
                    box.removeEventListener("touchstart",touchstart,false)
                    box.removeEventListener("touchmove",touchmove,false)
                    box.removeEventListener("touchend",touchend,false)

                    //更新容器位置,这个样子直接更新太突然了，不好看
                    //   BASE_WOSL=BASE_WOSL-width
                    // wrapper.style.left= BASE_WOSL+"px"
                    let save=BASE_WOSL-width//最终位置
                    let t=setInterval(()=>{
                        //从手指离开位置开始滑动
                        BASE_WOSL=wrapper.offsetLeft-width/30-0.5
                        if(BASE_WOSL<=save) {
                            BASE_WOSL=save//为了安全起见，免得一下子减的太多，位置不对劲
                            wrapper.style.left=save+"px"
                            clearInterval(t)
                            //console.log("下一页")
                            let cp=getCurrentPageNumber()
                            cp=cp+1
                            //一定要先设置页码，在调用，因为initPage也要判断是否还有下一页
                            setCurrentPageNumber(cp)
                            initPage(cp)
                            box.addEventListener("touchstart",touchstart)
                            //按住ctrl,鼠标点击addEventListener()查看源码，里面的interface GlobalEventHandlersEventMap有包含多少事件
                            box.addEventListener("touchmove",touchmove)

                            box.addEventListener("touchend",touchend)
                        }
                        else
                            wrapper.style.left=BASE_WOSL+"px"
                    },10)

                }
                else if(moveDistanceX<0&&haveUpPage())//上一页
                {
                    box.removeEventListener("touchstart",touchstart,false)
                    box.removeEventListener("touchmove",touchmove,false)
                    box.removeEventListener("touchend",touchend,false)

                    let save=BASE_WOSL+width
                    // wrapper.style.left= BASE_WOSL+"px"

                    let t=setInterval(()=>{
                        BASE_WOSL=wrapper.offsetLeft+width/30+0.5
                        if(BASE_WOSL>=save) {
                            BASE_WOSL=save//为了安全起见，免得一下子减的太多，位置不对劲
                            wrapper.style.left=save+"px"
                            clearInterval(t)
                            // console.log("上一页")
                            let cp=getCurrentPageNumber()
                            cp=cp-1
                            setCurrentPageNumber(cp)
                            initPage(cp)
                            box.addEventListener("touchstart",touchstart)
                            //按住ctrl,鼠标点击addEventListener()查看源码，里面的interface GlobalEventHandlersEventMap有包含多少事件
                            box.addEventListener("touchmove",touchmove)

                            box.addEventListener("touchend",touchend)
                        }
                        else
                        {
                            wrapper.style.left=BASE_WOSL+"px"
                        }
                    },10)
                }
        }
        else//距离不足，回到原位置
        {
            //滑动距离不足，回退到原位置
            //wrapper.style.left= BASE_WOSL+"px"
            console.log(moveDistanceX+"\n"+wrapper.offsetLeft+"\n"+BASE_WOSL)
                //下一页
                //先判断BASE_WOSL >= save，因为发现一个匪夷所思的现象当
                //wrapper.offsetLeft==BASE_WOSL=-902时，这个判断条件会成立
                if (moveDistanceX > 0&&(wrapper.offsetLeft!==BASE_WOSL)) {
                    /*移除事件监听器，防止在滑动过程中又滑动*/
                    box.removeEventListener("touchstart", touchstart, false)
                    box.removeEventListener("touchmove", touchmove, false)
                    box.removeEventListener("touchend", touchend, false)
                    console.log("移除事件监听")
                    let save = BASE_WOSL//最终位置
                    let t = setInterval(() => {
                        //从手指离开位置开始滑动
                        if (wrapper.offsetLeft >= save) {
                            BASE_WOSL = save//为了安全起见，免得一下子减的太多，位置不对劲
                            wrapper.style.left = save + "px"
                            clearInterval(t)
                            box.addEventListener("touchstart", touchstart)
                            //按住ctrl,鼠标点击addEventListener()查看源码，里面的interface GlobalEventHandlersEventMap有包含多少事件
                            box.addEventListener("touchmove", touchmove)
                            box.addEventListener("touchend", touchend)
                            console.log("注册事件监听")
                        } else {
                            //当moveDistanceX / 20=0.4时
                            BASE_WOSL = wrapper.offsetLeft + moveDistanceX / 20+0.5
                            wrapper.style.left = BASE_WOSL + "px"
                      //      console.log("加完:"+BASE_WOSL+"\n"+wrapper.offsetLeft+"\n"+save+"\n"+moveDistanceX/ 20)
                        }
                    }, 8)

                } else if (moveDistanceX < 0&&(wrapper.offsetLeft!==BASE_WOSL)) {
                    /*移除事件监听器，防止在滑动过程中又滑动*/
                    box.removeEventListener("touchstart", touchstart, false)
                    box.removeEventListener("touchmove", touchmove, false)
                    box.removeEventListener("touchend", touchend, false)
                    let save = BASE_WOSL//最终位置
                    let t = setInterval(() => {
                        //从手指离开位置开始滑动
                         if (wrapper.offsetLeft <= save) {
                            BASE_WOSL = save//为了安全起见，免得一下子减的太多，位置不对劲
                            wrapper.style.left = save + "px"
                            clearInterval(t)

                            box.addEventListener("touchstart", touchstart)
                            //按住ctrl,鼠标点击addEventListener()查看源码，里面的interface GlobalEventHandlersEventMap有包含多少事件
                            box.addEventListener("touchmove", touchmove)

                            box.addEventListener("touchend", touchend)
                        } else {
                             BASE_WOSL = wrapper.offsetLeft +moveDistanceX / 20-0.5//不是+0.5
                            wrapper.style.left = BASE_WOSL + "px"
                             //注意此时moveDistanceX小于0，用+
                        }
                    }, 8)
            }
        }
    }
</script>
<!--左右滑动翻页-->
<script>


    
</script>

</html>